<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日期选择</title>
		<link rel="stylesheet" type="text/css" href="css/dateTime.css"/>
		<style>
		select{
		 width: 80px;
		 margin: 5px;
		}
		</style>
	</head>
	<body>
		<div class="mycontainer">
			<input type="text" id="date" placeholder="请输入日期" />
			<input type="text" id="time" placeholder="请输入时间"  />
			<input type="text" id="datetime" placeholder="请输入日期和时间"/><br>
			<div id="">
				省份<select name="" id="province"></select>
				市区<select name="" id="city"></select>
				县城<select name="" id="country"></select>
			</div>
			
		</div>
		<script src="js/jquery.min.js" type="text/javascript" ></script>
		<script src="js/dateTime.min.js" type="text/javascript" ></script>
		<script type="text/javascript">
			var date=new Date();
			var y=date.getFullYear();//年
			var m=date.getMonth()+1;//月
			var d=date.getDate();//日
			var h=date.getHours();//小时
			var f=date.getMinutes();//分钟
			var s=date.getSeconds();//秒
			
			$("#date").datetime({
				type:"date",
				value:[y,m,d]
			})
			$("#time").datetime({
				type:"time",
				value:[h,f]
			})
			$("#datetime").datetime({
				type:"datetime",
				value:[y,m,d,h,f]
			})
			
			//省市县
			// 省份数组
			var provinceArr = ['上海', '江苏', '河北'];
			  // 城市数组
			  var cityArr = [
			  ['上海市'],
			 ['苏州市', '南京市', '扬州市'],
			 ['石家庄', '秦皇岛', '张家口']
			];
			  // 区域数组
			  var countryArr = [
			  [
			   ['黄浦区', '静安区', '长宁区', '浦东区']
			  ],
			  [
			   ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
			   ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
			   ['邗江区', '广陵区', '江都区']
			  ],
			  [
			   ['长安区', '桥西区', '新华区', '井陉矿区'],
			    ['海港区', '山海关区', '北戴河区', '抚宁区'],
			    ['桥东区', '桥西区', '宣化区', '下花园区']
			   ]
			  ];
			  window.onload = function(){
			  var province = document.getElementById('province');
			  var city = document.getElementById('city');
			  var country = document.getElementById('country');
			  createOption(province, provinceArr);
			  province.onchange = function(){
			   city.length = 0;
			   createOption(city, cityArr[this.selectedIndex]);
			   city.onchange();
			  }
			  city.onchange = function(){
			   country.length = 0;
			   createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
			  }
			  province.onchange();
			  }
			  function createOption(obj, data){
			  for (var i = 0; i < data.length; i++) {
			   var newOption = new Option(data[i], data[i]);
			   obj.add(newOption, null);
			  }
			  }
			
			
			
		</script>
		<div style="text-align: center;clear: both;margin-top: 300px;">
			
		</div>
		
	</body>
</html>
